
// 模拟服务器上的传递过来的数据

let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
  ]

/**
 * 1.需求: 遍历数组apiTypeData,把name属性值组装成html代码,
 *         再把组装好的HTML代码放进sort-nav1
 */
    //获取元素：
    let sortNav1=document.querySelector('.sort-nav1')

    //定义一个变量去保存组装好的数据
    let apiType=''

    apiTypeData.forEach(function(dom){
        console.log(dom.name);
        apiType += ` 
        <a href="#" class="${dom.isnew ? 'active':''}" 
        data-keyword="${dom.keyword}">${dom.name}</a>` 
    })

    //将组装好的数据渲染到sort-nav1里面
    sortNav1.innerHTML=apiType

    //我们虽然将数据渲染到页面了，但是那个激活加粗的样式class="active"
    //没有随着我们渲染进去

/**
 * 2.需求: 利用事件委派,给sortNav1注册点击事件, 将当前事件源的文本渲染到.api-seo2, 
 *         获取当前事件源的自定义属性keyword,渲染给.api-seo3
 * 注意: 事件委派中this不能代表当前触发对象,慎用
 *       事件委派中: 事件源 - e.target
 * 
 * 运用事件委派之后我们就不需要遍历数据了，我们找到他的父级，就像我们获取很多个li
 * 的话就需要遍历，但是我们用事件委派直接在他的父级ul上面注册事件就不需要遍历了
 */

let apiseo2=document.querySelector('.api-seo2')
let apiseo3=document.querySelector('.api-seo3')


    sortNav1.addEventListener('click',function(e){
       // e.target.keyword.textContent
       //得到标签节点   a/div  固定语法:e.target 这个数指代里面的所有就是点击
       //这个标签的任何一个地方都可以触发事件  不可以这样，我们必须筛选出a标签点击的时候出发事件
        console.log(e.target.nodeName==='A');
        if(e.target.nodeName==='A'){
            apiseo2.textContent=e.target.textContent
            //placeholder里面的值是新获取的 dataset.keyword 的值
           apiseo3.placeholder=e.target.dataset.keyword
        }
    })


/**
 * 3.模拟api列表数据
 */

//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
  ]


/**
 * 3.需求: 遍历数组listDataArr ,把name属性值组装成html代码,
 *         再把组装好的HTML代码放进api-detailAll 
 */

    let apiDetail=document.querySelector('.api-detailAll')

    console.log(apiDetail);
    let apiImg=''

    listDataArr.forEach(function(dom){
        //dom代表了数组里面的每一个元素
        //+=代表了将
        apiImg+=`    
        <li>
            <p class="${dom.isSpecial ? 'api-com':''}">${dom.isSpecial?'企业专用':''}</p>
            <a href="../page/API详情.html"><img src="../imgs/${dom.img}" alt=""></a>
            <p>${dom.name}</p>
            <p class="${dom.price==='免费' ? 'free':'money'}">${dom.price}</p>
            <a class="mouse">申请数据</a>
        </li> 
        `
        //再把组装好的HTML代码放进api-detailAll 
        apiDetail.innerHTML=apiImg
    })
    

/**
 * 4.需求: 点击mouse,显示蒙层mask
 */

let mouse=document.querySelectorAll('.mouse')   //点击的事件
console.log(mouse);

let mask=document.querySelector('.mask')  //蒙层
console.log(mask);
console.log(apiDetail);

apiDetail.addEventListener('click',function(e){
    //我们姚筛选出事件源
if(e.target.className=='mouse')  {
    mask.style.display='block'
} 
})


/**
 * 5.需求: 点击mask,隐藏自己  但是这个方法不行点击登录框的时候也会消失
 */
    mask.addEventListener('click',function(){
        mask.style.display='none'
    })

/**
 * 6.需求: 点击mask,阻止事件传播(事件冒泡)
 */
 let loginRight = document.querySelector('.login-right')
 loginRight.addEventListener('click', function (e) {
   e.stopPropagation();
 })
 /**
 * 8.需求: 鼠标移入菜单(toggle-login a)
 *         为当前菜单添加激活样式
 *         显示当前菜单对应的内容(login-box div)
 */
  tabCard('.login-active a', '.login-hz div')